﻿@page "/test"
@inject MessageService _message
@inject IConfiguration configure
@inject IJSRuntime  JSRuntime

<Popover Placement="@PlacementType.BottomLeft" OnVisibleChange="OnVisibleChange" Visible="_visible" ContentTemplate="@_upPictureFrom" Title="图片" Trigger="new TriggerType[] { TriggerType.Click }">
    <Icon Style="font-size:30px" Type="picture" Theme="outline" />
</Popover>


@code{

    private RenderFragment _upPictureFrom =>
    @<div>
        <Upload Action="@(APIUrl + "/api/blog/public-method/upload-file")"
                Name="avatar"
                @bind-FileList="fileList"
                ShowButton="fileList?.Count < 8"
                BeforeUpload="BeforeUpload"
                ListType="picture-card"
                OnPreview="(file)=> {
                           Console.WriteLine(file.FileName);
                           Console.WriteLine(file.Url);
                           previewVisible = true;
                           previewTitle = file.FileName;
                           imgUrl = file.Url;
                       }"
                OnChange="HandleChange"
                Headers="@AuthHeader"
                Data="@UploadDto">
            <div>
                <Icon Type="plus"></Icon>
                <div className="ant-upload-text">Upload</div>
            </div>

        </Upload>
        <Modal Visible="previewVisible"
               Title="previewTitle"
               OnCancel="()=> previewVisible=false">
            <img style="width: 100%" src="@imgUrl" />
        </Modal>
        <a @onclick="_ => this._visible = false">关闭</a>
    </div>;

private bool _visible = false;
bool previewVisible = false;
string previewTitle = string.Empty;
string imgUrl = string.Empty;
public Dictionary<string, string> AuthHeader = new Dictionary<string, string>();
public string APIUrl => configure.GetSection("API")["Url"];
public string SelfUrl => configure.GetSection("App")["SelfUrl"];
public string AuthUrl => configure.GetSection("AuthServer")["Authority"];
public Dictionary<string, object> UploadDto = new Dictionary<string, object>()
{
            {"FileType",1 }
        };

List<UploadFileItem> fileList = new List<UploadFileItem>
{
        new UploadFileItem
        {
            Id = "1",
            FileName = "image.png",
            State = UploadState.Success,
            Url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
         new UploadFileItem
        {
            Id = "5",
            FileName = "image.png",
            State = UploadState.Fail
        },
    };


protected override async Task OnInitializedAsync()
{
  AuthHeader = new Dictionary<string, string>()
  {
                    { "Authorization", await JSRuntime.InvokeAsync<string>("localStorage.getItem", "Authorization")}
                };
}

void HandleChange(UploadInfo fileinfo)
{
  if (fileinfo.File.State == UploadState.Success)
  {
      fileinfo.File.Url = fileinfo.File.ObjectURL;
  }
}

public class ResponseModel
{
  public string name { get; set; }

  public string status { get; set; }

  public string url { get; set; }

  public string thumbUrl { get; set; }
}

private void OnVisibleChange(bool visible)
{
  _visible = visible;
}

bool BeforeUpload(UploadFileItem file)
{
  var isJpgOrPng = file.Type == "image/jpeg" || file.Type == "image/png";
  if (!isJpgOrPng)
  {
      _message.Error("只支持jpg和png格式");
  }
  var isLt10M = file.Size / 1024 / 1024 < 10;
  if (!isLt10M)
  {
      _message.Error("请上传小于10M的图片");
  }
  return isJpgOrPng && isLt10M;
}
}
<style>
    /* you can make up upload button and sample style by using stylesheets */
    .ant-upload-select-picture-card i {
        color: #999;
        font-size: 32px;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>